<template>
  <div>
    <HeaderTitle :textObj="textObj"></HeaderTitle>

    <!-- 列表 -->
    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column
        align="center"
        type="index"
       
        label="序号"
        width="80"
      />
      <el-table-column align="center" prop="account" label="账号" width="120" />
      <el-table-column
        align="center"
        prop="username"
        label="用户名称"
        width="120"
      />
      <el-table-column align="center"  width="150" prop="type" :formatter="formatType" label="用户类型" />
      <el-table-column
        align="center"
        prop="cTime"
        label="创造时间"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column
        align="center"
        prop="uTime"
        label="更新时间"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column align="center" prop="desc" label="描述" />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        min-width="50"
      >
        <template #default="scope">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            @click="handleEdit(scope.row, scope.$index)"
          />
          <el-button
            type="danger"
            circle
            :icon="Delete"
            @click="handleDelete(scope.row, scope.$index)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { $accountList, $accountDel } from "../../api/index";
import { ref, onMounted } from "vue";
import HeaderTitle from "../../components/HeaderTitle.vue";
import { formatDate } from "../../utils/utils";
import { Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from 'vue-router'; // 引入 useRouter

let tableData = ref([]);
const router = useRouter(); // 获取路由实例

let textObj = {
  title: "子账号  ",
  name: "子账号列表 ",
  dsc: "  展示当前组织下的所有子账号，可修改子账号信息或删除子账号。",
};

// 账号列表
const getList = () => {
  $accountList().then((res) => {
    tableData.value = res.data;
  });
};

// 编辑账号
const handleEdit = (row, index) => {
  router.push({
    path: "/account/add",
    query: {
      id: row.id,
    },
  });
};
// 删除账号
const handleDelete = async (row, index) => {
  try {
    await ElMessageBox.confirm("确定要删除这条数据吗?", "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true,
    });
    await $accountDel({ id: row.id });
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    // 刷新列表
    getList();
  } catch (error) {
    console.error("删除数据失败:", error);
  }
};

onMounted(() => {
  getList();
});

const formatType = (row) => {
  if (row.type == 1) {
    return "超级管理员";
  }if(row.type == 2){
    return"管理员";
  }
   else {
    return "普通用户";
  }
}
</script>

<style>
</style>    